<!DOCTYPE html>
<html>
<head>
<%include("../../tpl/head.html"){}%>
<title>后台管理-账户管理</title>
</head>
<body class="hold-transition fixed skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 头部 -->
		<%include("../../tpl/header.html"){}%>
		<!-- 网页正文 -->
		<div class="content-wrapper">
			<!-- 网页正文-面包屑 -->
			<section class="content-header">
				<h1>用户管理</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li><a href="#">系统管理</a></li>
					<li class="active">用户管理</li>
				</ol>
			</section>
			<!-- 网页正文-主体 -->
			<section class="content">
				<div class="box box-solid">
					<div class="box-header with-border">
						<form class="form-inline" id="data-table-search">
							<div class="form-group form-group-sm">
								<div class="input-group input-group-sm">
									<div class="input-group-addon">账号</div>
									<input type="text" name="account" class="form-control input-sm" placeholder="请输入账号">
								</div>
							</div>
							<div class="form-group form-group-sm">
								<div class="input-group input-group-sm">
									<div class="input-group-addon">用户名</div>
									<input type="text" name="name" class="form-control input-sm" placeholder="请输入用户名">
								</div>
							</div>
							<button type="submit" class="btn btn-primary btn-sm">查找</button>
							<a href="add.jspx" class="btn btn-primary btn-sm">添加</a>
						</form>
					</div>
					<div class="box-body">
						<table id="data-table" class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
									<th data-data="icon">头像</th>
									<th data-data="name">用户名</th>
									<th data-data="account">账户</th>
									<th data-data="role.name">角色</th>
									<th data-data="email">邮箱</th>
									<th data-data="phone">手机</th>
									<th data-data="createTime">创建时间</th>
									<th></th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- 网页底部 -->
		<%include("../../tpl/footer.html"){}%>
	</div>
	<%include("../../tpl/script.html"){}%>
	<script type="text/javascript">
		$(document).ready(function() {
			// 初始化表格
			var dataTable = $('#data-table').DataTable({
				'columnDefs' : [ {
					"targets" : 0,
					'render' : function(data, type, full, meta) {
						return '<img src="' + data + '" style="max-height: 19px;"/>'
					}
				}, {
					"targets" : 7,
					'width' : '110px',
					'render' : function(data, type, full, meta) {
						return laytpl($('#operation_buttons').html()).render(full);
					}
				} ]
			});

			$('#data-table-search').on('submit', function() {
				dataTable.ajax.reload();
				return false;
			});
			$('#data-table').on('click', 'button[event-click="delGridRow"]', function() {
				var $b = $(this);
				var layer_c = layer.confirm('确定要删除该用户？', {
					btn : [ '确定', '取消' ]
				}, function() {
					$.getLoading('save.json?oper=del&id=' + $b.data('id'), function() {
						dataTable.row($b.parents('tr')).remove().draw();
						layer.close(layer_c);
					});
				}, function() {
					layer.close(layer_c);
				});
				return false;
			});
		});
	</script>
	<script type="text/html" id="operation_buttons">
        <div class="btn-group btn-group-xs">
			<a type="button"class="btn btn-success" href="view.jspx?account={{d.account}}" >查看</a>
            <a type="button" class="btn btn-info" href="edit.jspx?account={{d.account}}">修改</a>
            <button type="button" class="btn btn-danger" event-click="delGridRow" data-id="{{d.id}}" data-account="{{d.account}}">删除</button>
        </div>
    </script>
</body>
</html>
